<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        button{
            width: 100px;
            height: 30px;
            background-color: blue;
            /* border-width: 0px; */
            border-radius: 10px;
        }
        .wel{
            background-color: chartreuse;
            width: 200px;
            box-shadow: 2px 2px 10px chartreuse;
        }
        .news{
            width: 600px;
            height: 100px;
            /* overflow: hidden; */
            /* word-break: break-all; */
            /* overflow: scroll; */
            word-wrap: break-word;
            background: linear-gradient(White, Black 10%, Yellow);
            text-indent: 1em;
            background-image: url("https://www.cnblogs.com/images/logo_small.gif");
            background-repeat: no-repeat;
            background-size: contain;
        }
        .flex{
            display: flex;
            background-color: blue;
            width: 200px;
            height: 100px;
            transition: background-color 1s;
            transform: rotateX(60deg);
            /* transform: scale(1, 1.5); */
        }
        .flex:hover{
            background-color: red;
            /* transform: scale(1, 1.5); */
        }
    
        .flex:last-child{
            flex: 2;
        }
        .flex div{
            flex: 1;
        }
        div img{
            width: auto;

        }
    </style>
</head>
<body>
    <button>Submit</button><br>
    <div class="wel">Hello World</div>
    <div class="news">Java reduces costs, shortens developer timeframes, drives innovation, and improves application services as the programming language of choice for enterprise architecture, finance, and HR. Java is used in many industries including manufacturing, automotive, insurance, and public sector. Get enterprise-grade support from the primary contributor to the Java platform.</div>
    <div class="flex">
        <div>首页</div>
        <div>购物车</div>
        <div></div>
        <div></div>
        <div></div>
        
    </div>
</body>
</html>